"""
@author: Gaoyaoxia
@date: 2020-08-25 14:51:42
"""
<!-- 引用设置 -->
<template>
  <div class="div-quote">
    <a-modal
      class="quote-modal"
      title="引用设置"
      width="1150px"
      :visible="quoteVisible"
      :centered="true"
      @cancel="handleCancel"
      wrapClassName="cus-modal-wrapper"
    >
      <div>
        <div class="part-one">
          <div class="quote-header">
            <i class="suncnui suncnui-icon-yinyong" @click="editText(record)">
              <span>被引用素材标题</span>
            </i>
          </div>
          <div class="quote-content">
            <a-collapse
              v-model="activeKey"
              :bordered="false"
              style="lineHeight: 68px"
              @change="onChange"
            >
              <!-- @change="onChange" -->
              <a-collapse-panel key="1" :style="customStyle" :showArrow="false">
                <template slot="header">
                  <div class="title" v-for="(item) in quoteListData" :key="item.id">
                    <div style="width: 16px; height: 16px; float: left">
                      <a-checkbox
                        :checked="isChecked"
                        @click="(e, $event) =>onMainCheckChange(e, $event)"
                      ></a-checkbox>
                    </div>
                    <span
                      class="title-text"
                      :class="'click-news'"
                      @click="(e) => goQuoteDetails(e, item.id)"
                    >{{item.title}}</span>
                    <div class="news-source">
                      <span>{{item.sitename}}</span>
                      <span>{{item.pubdate}}</span>
                    </div>
                  </div>
                </template>
                <template slot="extra">
                  <div class="extra">
                    <span class="extra-title" @click="(e) => expandPane(e, activeKey)">
                      关联热点信息
                      <i
                        :class="activeKey.length > 0 ? 'suncnui suncnui-icon-xiala-copy-copy': 'suncnui suncnui-icon-xiala'"
                      ></i>
                    </span>
                  </div>
                </template>
                <div class="quote-list">
                  <a-checkbox-group
                    v-model="checkedList"
                    @change="(checkedList) => onCheckChange(checkedList)"
                  >
                    <a-checkbox v-for="group in quoteOptions" :key="group.id" :value="group.id">
                      <span>{{group.title}}</span>
                      <div class="list-source">
                        <span>{{group.sitename}}</span>
                        <span>{{group.pubdate}}</span>
                      </div>
                    </a-checkbox>
                  </a-checkbox-group>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
        <div class="part-two">
          <div class="quote-header">
            <i class="suncnui suncnui-icon-wenzhangbiaoti">
              <span>文章标题</span>
            </i>
          </div>
          <div class="article-content">
            <div class="article-search">
              <a-form layout="inline" :form="form">
                <a-form-item>
                  <a-select v-model="keyName" style="width:66px">
                    <!-- :getPopupContainer="triggerNode => triggerNode.parentNode" -->
                    <a-select-option value="2">全部</a-select-option>
                    <a-select-option value="year">年份</a-select-option>
                    <a-select-option value="title">标题</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item>
                  <a-input
                    class="search-input"
                    v-model="searchWord"
                    type="text"
                    placeholder="请输入您要的搜索的内容"
                  ></a-input>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" class="search-btn" @click="searchText()">搜索</a-button>
                </a-form-item>
              </a-form>
            </div>
            <div class="article-table">
              <a-table
                :loading="loading"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange , columnWidth: '32px'}"
                :columns="columns"
                :showHeader="false"
                :data-source="articleList"
                rowKey="id"
                :pagination="pagination"
                :scroll="scroll"
              >
                <template slot-scope="text,record" slot="articleTitle">
                  <div
                    class="title-style"
                    :class="'click-news'"
                    @click="(e) => goDetails(e, record.id)"
                  >{{record.articleTitle}}</div>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div class="quote-footer">
          <a-button class="submit-btn" type="primary" @click="submit()">确定</a-button>
          <a-button class="close-btn" @click="handleCancel()">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { paging } from "assets/js/mixin";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  mixins: [paging],
  components: {},
  props: {
    quoteVisible: {
      type: Boolean,
      default: false,
    },
    closeFunc: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      flag: false,
      scroll: {},
      loading: false,
      quoteListData: [
        {
          id: 1,
          title: "习近平谈云冈石窟：这是人类文明的瑰宝，要坚持保护第一",
          sitename: "新华网",
          pubdate: "2020-05-06 12：30",
        },
      ],
      activeKey: [],
      expandIconPosition: "right",
      customStyle:
        "background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden;",
      expandShow: false,
      isChecked: false,
      checkedList: [],
      quoteOptions: [
        {
          id: 1,
          title:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展",
          sitename: "新华网",
          pubdate: "2020-05-06 12：30",
        },
        {
          id: 2,
          title:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展",
          sitename: "新华网",
          pubdate: "2020-05-06 12：30",
        },
        {
          id: 3,
          title:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展",
          sitename: "新华网",
          pubdate: "2020-05-06 12：30",
        },
      ],
      keyName: "2",
      searchWord: "",
      form: {
        year: "",
        title: "",
      },
      columns: [
        {
          title: "文章标题",
          dataIndex: "articleTitle",
          ellipsis: true,
          scopedSlots: { customRender: "articleTitle" },
        },
      ],
      selectedRowKeys: [],
      articleList: [
        {
          id: 1,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议一步加强传统村落保护和发展的建一步加...",
        },
        {
          id: 2,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 3,
          articleTitle: "关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 4,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 5,
          articleTitle: "关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 6,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 7,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 8,
          articleTitle: "关于进一步加强传统村落保护和发展的建议",
        },
        {
          id: 9,
          articleTitle:
            "关于进一步加强传统村落保护和发展的建议关于进一步加强传统村落保护和发展的建议",
        },
      ],
      screenHeight: "",
    };
  },
  // computed: {
  //   ...mapState(["textVisible"]),
  // },
  watch: {},
  mounted() {
    this.getList();
    //获取屏幕高度
    this.screenHeight = document.body.clientHeight;
  },
  methods: {
    // ...mapMutations({
    //   setVisible: "SET_VISIBLE",
    // }),
    goQuoteDetails(e, id) {
      e.stopPropagation();
      const { href } = this.$router.resolve({
        path: `/console/configuration/messageDetail/defaultMessage`,
        query: {
          id: id,
        },
      });
      window.open(href, "_blank");
    },
    onChange(key) {
      this.activeKey = key;
      // //改变分页
      if (this.activeKey.length > 0) {
        this.scroll = { y: 240 };
      } else {
        this.scroll = {};
      }
    },
    expandPane(e, key) {},
    //获取文章标题
    getList() {},
    goDetails(e, id) {
      e.stopPropagation();
      // this.setVisible(false);
      const { href } = this.$router.resolve({
        path: `/console/configuration/hotMessage/index`,
        query: {
          id: id,
          textVisible: 0
        },
      });
      window.open(href, "_blank");
    },
    onMainCheckChange(e, $event) {
      e.stopPropagation();
      this.isChecked = e.target.checked;
    },
    onCheckChange(checkedList) {
      console.log("checkedList:", checkedList);
    },
    submit() {
      var _this = this;
      this.$message.success("点击了确定按钮");
      this.$confirm({
        title: "是否确认此引用操作？",
        onOk() {
          //请求接口，返回页面
          _this.quoteVisible = false;
        },
      });
    },
    handleCancel(e) {
      this.$emit("closeFunc");
    },
    //分页
    changePage(pagination) {
      this.pageNum = pagination.current;
      this.current = pagination.current;
      this.pageSize = pagination.pageSize;
      this.getList();
    },
    //列表多选操作
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>
<style>
</style>
<style lang='stylus' scoped>
.quote-header
  line-height 18px
  margin-left 4px
  .suncnui
    font-size 18px
  span
    margin-left 8px
    font-size 16px
    color #535353
.quote-content
  width 100%
  margin 14px 0px
  background-color #f5f5f5
.header
  // display flex
  // flex-direction row
  // justify-content space-between
  padding 0px 16px
  // align-items center
  // height 68px
.title
  float left
  width 70%
  padding 14px 0px
  .title-text
    margin-left 8px
    font-size 20px
    color #333333
    font-family 'Microsoft YaHei'
    font-weight bold
  .title-text.click-news:hover
    color #144598
    text-decoration underline
    cursor pointer
.news-source
  margin 5px 0px 0px 26px
  font-size 15px
  color #656b90
  /* cursor pointer */
  line-height 14px
  span
    margin-right 60px
.extra
  padding 18px 0px
  .extra-title
    font-size 14px
    color #0f95d4
    font-family 'Microsoft YaHei'
    cursor pointer
    .suncnui-icon-xiala
      font-size 12px
    .suncnui-icon-xiala-copy-copy
      font-size 12px
.quote-list
  width 100%
  .list-source
    margin 14px 0px 0px 26px
    font-size 14px
    color #656b90
    /* cursor pointer */
    line-height 14px
    span
      margin-right 60px
.article-search
  width calc(100% - 70px)
  overflow hidden
  position relative
  margin 16px 6px 6px 6px
  .search-input
    min-width 292px
    height 34px
    font-size 14px
  .search-btn
    height 34px
    background #1694cf
    color #ffffff
    border 0px
    font-size 14px
.article-table
  margin 0px 10px
  .title-style
    color #535353
    font-size 18px
    text-align left
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
  .title-style.click-news:hover
    color #144598
    text-decoration underline
    cursor pointer
.quote-footer
  // margin-bottom 5px
  .submit-btn
    font-size 14px
    width 76px
    height 36px
    margin 0px 10px
    border 1px solid #1694CF
    background #1694CF
  .close-btn
    font-size 14px
    width 76px
    height 36px
    margin 0px 10px
    border 1px solid #1694CF
    color #1694CF
</style>